<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root{
       --bgc-light:pink;
       --bgc-dark:black; 
    }
    :root{
        --theme-bgc-color: var(--bgc-light);
    }
    :root body[data-themes="dark"]{
        --theme-bgc-color: var(--bgc-dark);
    }
</style>
<body>
    <div>
        <select name="thems" id="changeTheme">
            <option value="Light">亮色主题</option>
            <option value="Dark">黑暗主题</option>
        </select>
    </div>
    <script>
        // !(function setDefaultTheme(){
        //     // document.documentElement.setAttribute("data-themes","dark")
        //     // 这个要放在前面，因为是根据:root的优先级来区别亮和暗的
        //     document.body.setAttribute("data-themes","dark")
        //     const bodyStyle = getComputedStyle(document.body).getPropertyValue("--theme-bgc-color")
            
        //     document.body.style.setProperty("background",bodyStyle)
        // })();
        const bodyStyle = getComputedStyle(document.body).getPropertyValue("--theme-bgc-color")
        console.log(bodyStyle);
        document.body.style.setProperty("background",bodyStyle);

        const changeTheme = document.querySelector("#changeTheme");
        changeTheme.addEventListener('change',(e)=>{
            if(e.target.value == "Dark"){
                document.body.setAttribute("data-themes","dark");
                const bodyStyle = getComputedStyle(document.body).getPropertyValue("--theme-bgc-color");
                document.body.style.setProperty("background",bodyStyle);
            }else{
                document.body.setAttribute("data-themes","light");
                const bodyStyle = getComputedStyle(document.body).getPropertyValue("--theme-bgc-color");
                document.body.style.setProperty("background",bodyStyle);
            }
        })
    </script>
</body>
</html>